import React, { useEffect } from 'react';
import { Form, Drawer, Button, Spin, ConfigProvider } from 'antd';
import { AddPost, postUtils } from '@/components/Organization';

const { handleSubmit, getFormData, useInit } = postUtils;
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
    }
};
/**
 * 组织架构部门抽屉
 */
const DrawerDepartment = props => {
    const {
        form,
        // 提交成功的回调
        onOk,
        onCancel,
        visible,
        // 节点属性
        treeNode,
        route,
        // 是否在树状图进行部门操作
        isTreeHandle = true,
        // 是否为编辑
        isEditDepartment = false,
        // 是否修改 z-index
        modifyZIndex = false
    } = props;
    const {
        formData,
        setFormData,
        observableId,
        loading,
        setLoading,
        setObservableId,
        spinning,
        setSpinning,
        departmentManager,
        setDepartmentManager
    } = useInit();

    /**
     * 新增||编辑部门 新增时主键id
     */
    const saveUpdate = () => {
        form.validateFields(async (err, value) => {
            if (!err) {
                handleSubmit({
                    treeNode,
                    setLoading,
                    value,
                    departmentManager,
                    isEditDepartment,
                    callback: onOk
                });
            }
        });
    };
    useEffect(() => {
        const fetchData = async () => {
            const data = await getFormData({
                treeNode,
                setSpinning
            });
            setFormData(data);
            setObservableId(data.companyId);
            setDepartmentManager(data.departmentManager);
        };
        form.resetFields();
        if (isEditDepartment) {
            fetchData();
        } else {
            setObservableId(treeNode.companyId);
        }
    }, [visible]);
    return (
        <Drawer
            style={modifyZIndex ? {
                zIndex: '1031'
            } : {}}
            title={isEditDepartment ? '编辑部门' : '新增部门'}
            width={520}
            onClose={onCancel}
            visible={visible}
            // bodyStyle={{ paddingBottom: 80 }}
            // style={{ margin: '24px' }}
        >
            <ConfigProvider getPopupContainer={trigger => trigger.parentNode}>
                <Spin spinning={spinning}>
                    <Form {...formItemLayout}>
                        <AddPost
                            form={form}
                            formData={formData}
                            treeNode={treeNode}
                            isTreeHandle={isTreeHandle}
                            isEditDepartment={isEditDepartment}
                            observableId={observableId}
                            setDepartmentManager={setDepartmentManager}
                            setObservableId={setObservableId}
                            code={route.code}
                        />
                    </Form>
                </Spin>
                <div
                    style={{
                        position: 'absolute',
                        right: 0,
                        bottom: 0,
                        width: '100%',
                        borderTop: '1px solid #e9e9e9',
                        padding: '10px 16px',
                        background: '#fff',
                        textAlign: 'right'
                    }}
                >
                    <Button onClick={onCancel} style={{ marginRight: 8 }}>
                        取消
                    </Button>
                    <Button onClick={saveUpdate} type="primary" loading={loading}>
                        保存
                    </Button>
                </div>
            </ConfigProvider>

        </Drawer>
    );
};
export default Form.create()(DrawerDepartment);
